@import './common.less';

.refuel-list-base {
  background: @bg-color;
  .full-screen();
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  .header {
    background: #f2f2f2;
    height: 100/@ppr;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 28/@ppr;
    color: rgb(46, 46, 54);
    .icon-trangle {
      font-size: 18/@ppr;
      margin-left: 8/@ppr;
    }
  }
  .list {
    .list-empty {
      .icon {
        margin-top: -400/@ppr;
      }
    }
    .scrollable();
    flex: 1;
    .cell-group {
      .group-header {
        height: 106/@ppr;
        line-height: 106/@ppr;
        background: #f6f6f6;
        padding-left: 30/@ppr;
        font-size: 30/@ppr;
        font-weight: bold;
        color: rgb(46, 46, 54);
      }
      .group-body {
        .refuel-cell {
          background: white;
          margin-bottom: 20/@ppr;
          padding-left: 30/@ppr;
          padding-bottom: 30/@ppr;
          .cell-header {
            height: 90/@ppr;
            padding-right: 30/@ppr;
            .hairline(bottom, rgb(229, 229, 229));
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            color: rgb(46, 46, 54);
            font-size: 26/@ppr;
            .icon-arrow {
              font-size: 26/@ppr;
              color: rgb(184, 184, 184);
            }
          }
          .cell-row {
            margin-top: 30/@ppr;
            padding-right: 30/@ppr;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            color: rgb(153, 153, 153);
            font-size: 30/@ppr;
            .cell-text {
              margin-left: 22/@ppr;
              color: rgb(46, 46, 54);
            }
          }
        }
      }
    }
  }
}


.refuel-detail {
  .full-screen();
  background: #e9e8ee;
  .scrollable();
  padding: 30/@ppr 30/@ppr;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;

  .close {
    width: 38/@ppr;
    height: auto;
    position: absolute;
    top: 32/@ppr;
    right: 30/@ppr;
  }

  .icon {
    height: 142/@ppr;
    width: auto;
    align-self: center;
    z-index: 99;
  }

  .content-view {
    background: white;
    margin-top: -72/@ppr;
    border-top-left-radius: 16/@ppr;
    border-top-right-radius: 16/@ppr;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: 0 32/@ppr;

    .title {
      font-size: 34/@ppr;
      font-weight: 700;
      color: @cq-main-text-color;
      align-self: center;
      margin-top: 90/@ppr;
    }

    .date {
      font-size: 24/@ppr;
      color: @cq-text-color;
      align-self: center;
      margin: 12/@ppr 0 20/@ppr 0;
    }

    .dash-line {
      width: 100%;
      height: auto;
      content: svg(dash-line param(--h 2px) param(--w 640px) param(--dash 8px 4px) param(--color @cq-line-color));
    }

    .text-view {
      padding: 40/@ppr 0;

      .text-row {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        font-size: 30/@ppr;
        color: @cq-main-text-color;
        margin-bottom: 20/@ppr;

        &:last-child {
          margin-bottom: 0;
        }

        .text {}

        .value {
          font-size: 28/@ppr;
        }

        .link {
          font-size: 28/@ppr;
          color: @cq-link-color;
        }

        .money {
          font-size: 28/@ppr;
          color: @cq-main-color;
        }
      }
    }

    .body {
      padding: 10/@ppr 0 30/@ppr 0;

      .body-content {
        padding-bottom: 40/@ppr;
      }

      .body-row {
        background: #f9f9f9;
        height: 70/@ppr;
        padding: 0 40/@ppr;
        margin-bottom: 4/@ppr;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;

        .text {
          flex: 1;
          font-size: 28/@ppr;
          color: @cq-text-color;

          &.name {
            text-align: left;
          }

          &.num {
            text-align: center;
          }

          &.price {
            text-align: right;
          }
        }
      }
    }
  }

  .line {
    width: 100%;
    height: auto;
  }
}
